<template>
  <cjui-page-panel viewHeightType="full">
    <cjui-page-layout>
      <template #search>
        <cjui-search-form
          v-model:params="searchParams"
          :fields="searchFields"
          @query="tableMethods.getSearchData"
        />
      </template>

      <template #btns>
        <el-button type="primary" @click="editDialogRef.open('add')">
          <cjui-icon icon="ep:plus" />
          <span>添加</span>
        </el-button>
        <el-button type="danger">
          <cjui-icon icon="ep:minus" />
          <span>删除</span>
        </el-button>
        <el-button type="warning">
          <cjui-icon icon="ep:upload" />
          <span>导入</span>
        </el-button>
        <el-button type="success">
          <cjui-icon icon="ep:download" />
          <span>导出</span>
        </el-button>
      </template>

      <cjui-table
        ref="cjuiTableRef"
        :loading="tableState.loading"
        :columns="columns"
        :data="tableState.data"
        height="100%"
        :table-border="true"
        :pagination="tableState"
      />

      <EditDialog ref="editDialogRef" @update="tableMethods.getData" />
    </cjui-page-layout>
  </cjui-page-panel>
</template>

<script lang="tsx" setup>
import EditDialog from './components/EditDialog.vue'

const message = useMessage()

// 查询相关
const searchParams = ref({})
const searchFields = computed(() => {
  return [
    {
      prop: 'input',
      label: '输入框：',
      compType: 'input',
      compProps: {
        style: 'width: 240px',
        clearable: true,
        placeholder: '请输入'
      }
    },
    {
      prop: 'date',
      label: '日期框：',
      compType: 'date',
      compProps: {
        style: 'width: 240px',
        valueFormat: 'YYYY-MM-DD',
        clearable: true,
        placeholder: '请选择'
      },
      inSenior: true,
      span: 8
    },
    {
      prop: 'select',
      label: '选择器：',
      options: [
        { label: '选择项1', value: '1' },
        { label: '选择项2', value: '2' },
        { label: '选择项3', value: '3' },
      ],
      compType: 'select',
      compProps: {
        style: 'width: 240px',
        clearable: true,
        placeholder: '请选择'
      },
      inSenior: true,
      span: 8
    },
    {
      prop: 'radioGroup1',
      label: '单选器：',
      options: [
        { label: '单选项1', value: '1' },
        { label: '单选项2', value: '2' },
        { label: '单选项3', value: '3' },
      ],
      compType: 'radio-group',
      inSenior: true,
      span: 24
    },
    {
      prop: 'radioGroup2',
      label: '单选器：',
      options: [
        { label: '单选项1', value: '1' },
        { label: '单选项2', value: '2' },
        { label: '单选项3', value: '3' },
      ],
      compType: 'radio-group',
      inSenior: true,
      span: 24
    }
  ]
})

// 表格相关
const { tableState, tableMethods } = useTableHook({
  getData: () => {
    tableState.loading = true
    setTimeout(() => {
      tableState.total = 100;
      tableState.data = [
        { params1: '列1值', params2: '列1值', params3: '列1值' },
        { params1: '列2值', params2: '列2值', params3: '列2值' },
        { params1: '列3值', params2: '列3值', params3: '列3值' },
        { params1: '列4值', params2: '列4值', params3: '列4值' },
        { params1: '列5值', params2: '列5值列5值列5值', params3: '列5值' },
        { params1: '列6值列5值', params2: '列6值', params3: '列6值列5值' },
        { params1: '列7值', params2: '列7值', params3: '列7值' },
        { params1: '列8值', params2: '列8值', params3: '列8值' },
        { params1: '列9值', params2: '列9值列5值', params3: '列9值' },
        { params1: '列10值', params2: '列10值', params3: '列10值列5值' },
      ];
      tableState.loading = false
    }, 500)
  }
});
const columns = computed(() => {
  return [
    {
      type: 'selection',
      label: '',
      fixed: 'left',
    },
    {
      type: 'index',
      label: '序号',
      fixed: 'left',
    },
    {
      prop: 'params1',
      label: '列1',
    },
    {
      prop: 'params2',
      label: '列2',
    },
    {
      prop: 'params3',
      label: '列3',
    },
    {
      prop: 'operation',
      label: '操作',
      width: '120',
      align: 'center',
      fixed: 'right',
      slots: {
        default: ({ row, $index }) => {
          return (
            <>
              <el-button type="primary" link onClick={() => editDialogRef.value.open('edit', row)}>编辑</el-button>
              <el-button type="danger" link onClick={() => deleteRow(row, $index)}>删除</el-button>
            </>
          )
        }
      }
    },
  ]
})

// 新增修改
const editDialogRef = ref()
// 删除
const deleteRow = (row: any, index: number) => {
  message.confirmError('确定删除该条数据？', '删除').then(() => {
    tableState.data.splice(index, 1)
    message.notifySuccess('删除成功')
  }).catch(() => {})
}

onMounted(() => {
  tableMethods.getData()
})
</script>
